<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/axios.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
					<!-- 新增div -->
					<div align="center">
						<h3>用户新增</h3>
						姓名: <input type="text" v-model="adduser.name" />
						年龄: <input type="number" v-model="adduser.age" />
						性别: <input type="radio" v-model="adduser.sex" name="sex" value="男"/>男
								<input type="radio" v-model="adduser.sex" name="sex" value="女"/>女
						<button @click="addUserBtn()" >新增</button>
					</div>
					<hr />
					<!-- 修改div -->
					<div align="center">
						<h3>用户修改</h3>
						编号: <input type="text" disabled="disabled" v-model="upuser.id"/>
						姓名: <input type="text" v-model="upuser.name"/>
						年龄: <input type="text" v-model="upuser.age"/>
						性别:  <input type="radio" v-model="upuser.sex" name="sex2" value="男"/>男
								<input type="radio" v-model="upuser.sex" name="sex2" value="女"/>女
						<button @click="updeteUser">修改</button>
						
					</div>
					
					<!-- 展现div -->
					<div>
						<table border="1px" align="center" width="80%">
							<tr align="center">
								<th colspan="5"><h3>用户列表</h3></th>
							</tr>
							<tr align="center">
								<th>编号</th>
								<th>姓名</th>
								<th>年龄</th>
								<th>性别</th>
								<th>操作</th>
							</tr>
							<tr align="center" v-for="u in user">
								<td v-text="u.id"></td>
								<td v-text="u.name"></td>
								<td v-text="u.age"></td>
								<td v-text="u.sex"></td>
								<td width="20%">
									<button @click="backToDate(u)">修改</button>
									<button @click="deleteById(u.id)">删除</button>
								</td>
							</tr>
						</table>
					</div>
				</div>
		<script>
			//定义axios请求前缀
			axios.defaults.baseURL = "http://localhost:8090" 
			new Vue({
				el : "#app",
				data:{
					user : [
					{
						id : '',
						name : '',
						age : '',
						sex : ''
					}
					],
					adduser:{
						name : '',
						age : '',
						sex : ''
					},
					upuser:{
						id : '',
						name : '',
						age : '',
						sex : ''
					}
				},
				methods:{
					deleteById(id){
						let y = confirm("是否要删除?")
						if( y == true){
							axios.delete(`/axios/deleteById/${id}`).then(
							promise =>{
								alert(promise.data)
								this.getUser()
							}
						)
						}	
					},
					getUser(){
						axios.get("/vue/findAll").then(
						promise =>{
							this.user = promise.data
						}
					)
					},
					addUserBtn(){
						axios.post("/axios/saveUser",this.adduser).then(
							promise =>{
								let msg = promise.data
								alert(msg)
								this.getUser()
								this.adduser = {}
							}
						)
					},
					updeteUser(){
							axios.put("/axios/update",this.upuser).then(
								promise =>{
									this.upuser = {}
									this.getUser(
									)
									alert(promise.data)
								}
							)
					},
					backToDate(u){
						this.upuser =  JSON.parse(JSON.stringify(u))
					}
				},
				created(){
					this.getUser()
				}
			})
		</script>
	</body>
</html>
